<!-- 组织详情右侧内容组件 -->
<template>
  <div class="wrap">
    <div class="container">
      <a-tabs lazy-load type="rounded">
        <a-tab-pane key="1" title="职位信息">
          <PositionInfo></PositionInfo>
        </a-tab-pane>
        <!-- <a-tab-pane key="2" title="在职人员">
          <PositionOnJobs></PositionOnJobs>
        </a-tab-pane>
        <a-tab-pane key="3" title="历任人员">
          <PositionHistoryOnJob></PositionHistoryOnJob>
        </a-tab-pane>
        <a-tab-pane key="4" title="操作历史">
          <PositionHistory></PositionHistory>
        </a-tab-pane> -->
      </a-tabs>
    </div>

    <a-modal
      :width="'50%'"
      :visible="modalVisible"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
      unmountOnClose
      title-align="center"
    >
      <template #title>
        {{
          modalType === 1
            ? '职位启用'
            : modalType === 2
            ? '职位停用'
            : '删除职位'
        }}
      </template>
      <div>
        {{
          modalType === 1
            ? '是否启用该职位？'
            : modalType === 2
            ? '是否停用该职位？'
            : '是否删除该职位？'
        }}
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import {
  GetPositionDefault,
  ChangePositionState,
  DelPosition
} from '@/apis/management/organization/positionManagement';
import PositionInfo from './Components/PositionInfo/index.vue';
import PositionOnJobs from './Components/PositionOnJobs/index.vue';
import PositionHistoryOnJob from './Components/PositionHistoryOnJob/index.vue';
import PositionHistory from './Components/PositionHistory/index.vue';
import { getFlatDept, getJobDetail } from '@/utils/common';

const route = useRoute();
// 档案id
let id = Number(route.query.id);
let ownerType = Number(route.query.ownerType);
onBeforeRouteUpdate((to) => {
  id = Number(to.query.id);
  ownerType = Number(to.query.ownerType);
  getData();
});

let positionName = ref('');

const headerInfo = reactive([
  {
    label: '职位编码',
    value: ''
  },
  {
    label: '职位类别',
    value: ''
  },
  {
    label: '编制人数',
    value: ''
  },
  {
    label: '关联职务',
    value: ''
  },
  {
    label: '所属公司',
    value: ''
  },
  {
    label: '所属部门',
    value: ''
  },
  {
    label: '启用状态',
    value: ''
  }
]);

// 获取数据
const getData = async () => {
  try {
    const res: any = await GetPositionDefault({
      id
    });
    positionName.value = res.name;
    headerInfo[1].value = res.positionType;
    headerInfo[6].value = res.enable === 1 ? '已启用' : '停用';
    // res.useTemplate.collectionModel.forEach((item: any) => {
    //   item.controlModel.forEach((item2: any) => {
    //     let value = item2.ctlValue.ctlValue;
    //     switch (item2.ctlCode) {
    //       // 职位名称
    //       // case 'C7341027925C943708F3AEF98703ECC47':
    //       //   positionName.value = item.value;
    //       //   break;
    //       // 职位编码
    //       case 'CB25F6DA9F83C4424BBC37E8756BB871E':
    //         headerInfo[0].value = value;
    //         break;
    //       // 上级职位
    //       // case 'ORGANIZATION_SUPERIOR':
    //       // headerInfo.value.superiorOrganization = item.value;
    //       //   break;

    //       // 职位类别
    //       // case 'C63EC32DCE9CC4BE6AC7649E23234A542':
    //       //   headerInfo[1].value = item.value;
    //       //   break;

    //       // 编制人数
    //       case 'CD25749DBA68E4BF3BCA616DD63751CB7':
    //         headerInfo[2].value = value;
    //         break;

    //       // 关联职务
    //       case 'C1F5AA49A78EC4B4FBD487F4D5887E576':
    //         (async () => {
    //           const temp = await getJobDetail(+value);
    //           headerInfo[3].value = temp.name;
    //         })();
    //         break;

    //       // 所属公司
    //       case 'CA8ABCC1480744557B3014C3454465A7E':
    //         headerInfo[4].value = deptList.value.find(
    //           (el: any) => el.id == value
    //         )?.name;
    //         break;

    //       // 所属部门
    //       case 'CED44AC9966904CD1AB546D309903727C':
    //         headerInfo[5].value = deptList.value.find(
    //           (el: any) => el.id == value
    //         )?.name;
    //         break;

    //       // 启用状态
    //       // case 'ORGANIZATION_HEADCOUNT':
    //       //   headerInfo.value.positonType = item.value;
    //       //   break;
    //       default:
    //         break;
    //     }
    //   });
    // });
  } catch (error: unknown) {
    console.log(error);
  }
};

let deptList = ref(); // 储存部门列表
onMounted(async () => {
  const res = await getFlatDept();
  deptList.value = res;
  getData();
});

/*
  储存更多功能的type
  1 职位启用
  2 职位停用
  3 删除职位
*/
let modalType = ref(0),
  modalVisible = ref(false); // 更多功能弹出框

// 更多功能下拉框
const handleSelect = (val: number) => {
  modalType.value = val;
  modalVisible.value = true;
};

// 确认弹出框
const handleModalOk = async () => {
  try {
    switch (modalType.value) {
      // 职位启用
      case 1:
        await ChangePositionState({
          ids: [id],
          enable: 1
        });
        getData();
        break;
      // 职位停用
      case 2:
        await ChangePositionState({
          ids: [id],
          enable: 2
        });
        getData();
        break;
      // 删除职位
      case 3:
        await DelPosition({
          ids: [id]
        });
        break;
      default:
        break;
    }
    modalVisible.value = false;
  } catch (error: unknown) {
    console.log(error);
  }
};

// 取消弹出框
const handleModalCancel = () => {
  modalVisible.value = false;
};
</script>

<style scoped lang="less">
.wrap {
  .header {
    .box1 {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .info-title {
        color: #86909c;
      }
    }
    .box2 {
      display: flex;

      &-main {
        width: 216px;
        height: 60px;
        background-color: #e8f3ff;
        border: 1px solid #165dff;
        text-align: center;
        line-height: 60px;
      }
    }
  }
}
:deep(.arco-tabs-nav-tab) {
  justify-content: center;
}
:deep(.arco-scrollbar.arco-scrollbar-type-track .arco-scrollbar-track) {
  background-color: #fff;
}
</style>
